<template>
  <div class="login">
    <div class="loginShow">
      <h2>ANDERW 安德办公</h2>
      <div class="theLogin">
        <h3>{{ rukou1 }}登录界面</h3>
        <el-input v-model="sname" placeholder="请输入账号" class="thy" @blur="check(1)"></el-input>
        <div v-if="tipsjlf2" class="tips">请输入密码</div>
        <el-input placeholder="请输入密码" v-model="spsx" show-password class="psr" @blur="check(2)"></el-input>
        <div v-if="tipsjlf1" class="tips">请输入账号</div>
        <el-button type="primary" @click="submit" class="btn" :disabled="flag">登录</el-button>
        <el-button type="primary" @click="reset" class="btn">重置</el-button>
        <!-- <div v-if="flag" class="tips">密码与账号不相匹配</div> -->

        <p class="rukou" @click="choselogin">{{ rukou }}入口>>></p>
        <!-- <router-link to="/manageLogin">
        </router-link> -->
      </div>
      <p>©2018 Andrew 安德办公管理平台登录入口</p>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['logininfo'])
  },
  data() {
    return {
      sname: '',
      spsx: '',
      rukou: '员工',
      rukou1: '管理员',
      rukouFlag: true,
      tipsjlf1: false,
      tipsjlf2: false,
      flag: false,//登录按钮节流阀
      list: {},

    }
  },
  methods: {
    check(i) {//失焦验证提示
      if ((i == 1) && (this.sname == "")) {
        this.tipsjlf1 = true
        this.flag = true;
      } else if ((i == 2) && (this.spsx == "")) {
        this.tipsjlf2 = true
        this.flag = true;
      } else {
        this.tipsjlf1 = false;
        this.tipsjlf2 = false;
        this.flag = false;
      }
    },
    submit() {//登录
      var that = this;
      if (this.sname == '' || this.spsx == '') {
        this.flag = true
        this.tipsjlf1 = true;
        this.tipsjlf2 = true;
      } else {//调用接口，根据用户名查找密码
        var name = this.sname
        this.$axios({
          method: 'get',
          url: `http://127.0.0.1:9090/personinfo?loginname=${name}`,
        }).then(function (res) {
          var arr = res.data.data;
          that.$store.commit('setlogininfo', arr[0])
          if ((arr[0].UserGH == name) && (arr[0].PassWord == that.spsx)) {//登录成功
            alert('登录成功');
            if (that.rukou1 == '管理员') {
              that.$router.push({
                path: '/home',
                query: {
                  admin: that.rukou1,
                  username: name
                }
              });
              that.$store.commit('getrukou', that.rukou1)
            } else {
              that.$router.push('/home');
              that.$store.commit('getrukou', that.rukou1)
            }
          } else {//登录失败，就重置
            alert('账号与密码不相匹配，请重新输入');
            that.reset();
          }
        })
      }
    },
    choselogin() {//切换接口
      if (this.rukouFlag) {//管理入口
        this.rukouFlag = !this.rukouFlag;
        this.rukou1 = "员工"
        this.rukou = "管理员"
      } else {//员工入口
        this.rukouFlag = !this.rukouFlag;
        this.rukou1 = "管理员"
        this.rukou = "员工"
      }
      // console.log(this.logininfo);
      // this.$store.commit('setlogininfo',{name:'lisi',pwd:'111'})
    },
    reset() {//重置函数
      this.sname = '';
      this.spsx = '';
      this.tipsjlf1 = false;
      this.tipsjlf2 = false;
      this.flag = false;
    },
    getlogininfo(name) {
      this.$axios({
        method: 'get',
        url: `http://127.0.0.1:9090/personinfo?loginname=${name}`,
      }).then(function (res) {
        console.log(res.data);
      })
    }
  }
}
</script>

<style  scoped>
* {
  margin: 0;
  padding: 0;
}

.login {
  width: 100%;
  height: 100vh;
  background-image: url(../../assets/bg.jpg);
  background-size: cover;
  position: relative;
  overflow: hidden;

}

.tips {
  color: red;
  font-size: 13px;
  position: absolute;
  top: 155px;
}

/* .login .tips:nth-of-type(1){
 top: 155px;
} */
.login .tips:nth-of-type(2) {
  top: 227px;
}

.loginShow {
  width: 60%;
  height: 100%;
  border-radius: 10px;
  padding: 50px;
  margin: auto;
  /* position: relative; */
}

.loginShow>h2 {
  width: 100%;
  font-size: 44px;
  color: #fff;
  text-align: center;
  margin-bottom: 50px;
}

.theLogin {
  width: 377px;
  height: 290px;
  border-radius: 10px;
  padding: 50px;
  background-color: #fff;
  box-shadow: 0 0 10px #ccc;
  margin: auto;
  position: relative;
}

.theLogin>h3 {
  font-size: 26px;
  color: black;
  text-align: center;
  margin-bottom: 30px;
  margin-top: -5px;
}

.thy {
  width: 100%;
  margin-bottom: 30px;
}

.psr {
  width: 100%;
  margin-bottom: 30px;
}

.btn {
  height: 40px;
  width: 30%;
  margin: 10px 25px;
  margin-bottom: 30px;
}

.theLogin>a {
  text-align: center;
  color: #ccc;
  font-size: 20px;
  margin-top: 30px;
  text-decoration: none;
}

.rukou {
  color: #575454;
  margin-top:0 ;
}

p {
  text-align: center;
  color: #7e7878;
  font-weight: 600;
  font-size: 20px;
  margin-top: 50px;
  text-decoration: none;
}
</style>
